{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}登录&Login{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
{% endblock %}

{% block content %}

    <div class="account">
        <!-- novalidate 关闭浏览器校验 -->
        <div class="title">用户登录</div>
        <form id="LoginForm" method="post" novalidate>
            {% csrf_token %}
            {% for field in form %}
                {% if field.name == 'code' %}   <!-- 循环到 code 字段时,增加一个 button 获取验证码 -->
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                        <div class="row clearfix">
                            <div class="col-md-7">
                                {{ field }}
                                <span class="error-msg">{{ field.errors.0 }}</span>
                            </div>
                            <div class="col-md-5">
                                <img id='imageCode' src="{% url 'image_code' %}" title="更换图片">
                                <!--
                                <input id='btnSms' type="button" value="获取验证码" class="btn btn-default">
                                -->
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                        {{ field }}
                        <span class="error-msg">{{ field.errors.0 }}</span>
                    </div>
                {% endif %}
            {% endfor %}

            <div class="row">

                <div class="col-xs-7">
                    <button id='reset' type="button" class="btn btn-primary btn-sm">
                        <i class="fa fa-refresh" aria-hidden="true"> 重置</i>

                    </button>

                    <input type="submit" class="btn btn-success btn-sm" value="登录">

                </div>


            </div>

        </form>
    </div>






{% endblock %}


{% block js %}
    <script>
        $(function () {
            BindClickImage();
            BindClickEmpty();
        })

        function BindClickImage() {
            $('#imageCode').click(function () {
                // 获取以前的src地址
                var oldSrc = $(this).attr('src');
                //  oldSrc + '?' 相当于当前地址刷新一次  //index/?name=123
                $(this).attr('src', oldSrc + '?');
            })
        }


        function BindClickEmpty() {
            $('#reset').click(function () {
                $('.error-msg').empty();
                $('#id_pwd').val('');    //  对 value值写入空字符
                $('#id_code').val('');
                $('#id_emp_no').val('');

            })
        }


    </script>
{% endblock %}